<template>
  <div>

    <el-main style="display: flex;">

      <div class="left">
        <el-card class="box-card">
          <el-statistic :value="count" title="今日预约"></el-statistic>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
          <div slot="header" style="text-align: center;">
            <span>我的预约</span>
          </div>
          <div v-if="my_reservation.length>0">
            <div class="my_order"   v-for="(item,index) in my_reservation" v-bind:key="index">
              <el-card shadow="always">
                座位{{item.sit_num+1}}|{{item.time_range}} <el-button type="text" @click="deleteReservation(item.id)" icon="el-icon-delete">取消预约</el-button>
              </el-card>
            </div>
          </div>
          <el-empty description="暂无预约" v-else></el-empty>
        </el-card>
      </div>

      <div class="right">
        <h1 style="text-align: center;">自习室预约</h1>

        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="预约时间段" prop="time_range">
              <el-select v-model="ruleForm.time_range" placeholder="请选择预约时间段" @change="getSits">
                <el-option v-for="(item,index) in time_range_List" v-bind:key="index" :label="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="座位编号" prop="sit_num">
              <el-select v-model="ruleForm.sit_num" placeholder="请选择座位编号">
                <el-option v-for="(item,index) in sit_List" v-bind:key="index" :label="item.sit_num+1" :value="item.sit_num"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即预约</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>


      </div>
    </el-main>


  </div>
</template>

<script>
export default {
  name: 'MainPage',
  data() {
    return {
      count:0,
      uid:null,
      time_range_List:[
        {
          'value':'8:00-10:00'
        },{
          'value':'10:00-12:00'
        },{
          'value':'12:00-14:00'
        },{
          'value':'14:00-16:00'
        },{
          'value':'16:00-18:00'
        },{
          'value':'18:00-20:00'
        },{
          'value':'20:00-22:00'
        }
      ],
      sit_List:[],
      my_reservation:[],
      ruleForm: {
        time_range: '',
        sit_num: null
      },
      rules: {
        time_range: [
          { required: true, message: '请选择预约时间段', trigger: 'blur' },
        ],
        sit_num: [
          { required: true, message: '请选择座位编号', trigger: 'blur' }
        ],
      }
    }
  },
  created(){
    this.uid = localStorage.getItem('uid');
    this.getCnt()
    this.getMy()
  },
  methods: {
    submitForm(formName) {
      if(this.my_reservation.length>=2){
        this.$message({
          type: 'error',
          message: '预约失败!预约数量最多为2次'
        });
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            time_range: this.ruleForm.time_range,
            sit_num:this.ruleForm.sit_num,
            uid:this.uid
          }
          this.$http.post('/reservation/doreserve', params).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '预约成功!'
              });
              this.resetForm('ruleForm')
              this.getCnt()
              this.getMy()
            } else {
              this.$message({
                type: 'error',
                message: '预约失败!'
              });
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCnt(){
      this.$http.get('/reservation/getCnt').then((res) => {
        if (res.data.code == 200) {
          this.count = res.data.data
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getSits(val){
      this.$http.get('/reservation/getSitBy?time_range=' + val).then((res) => {
        if (res.data.code == 200) {
          this.sit_List = res.data.data
          this.ruleForm.sit_num = null
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getMy(){
      // 获取我的预约
      this.$http.get('/reservation/getmy?uid='+this.uid).then((res) => {
        if (res.data.code == 200) {
          this.my_reservation = res.data.data
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteReservation(data) {
      this.$confirm('此操作将删除该条预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(data)
        this.$http.post('/reservation/deletereserve', {id:data}).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.resetForm('ruleForm')
            this.getCnt()
            this.getMy()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }).catch((err) => {
          console.log(err)
        })
       
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
}
</script>

<style scoped>
.left{
  width: 300px;
}
.my_order {
  padding: 5px 0 5px 0;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 500px;
}
</style>
